<template>
  <div class="report-center">
    <div class="report-header">
      <h2>银行卡交易报表</h2>
      <div class="filters">
        <label>时间范围：</label>
        <input type="month" v-model="month" />
        <label>银行卡号：</label>
        <input type="text" v-model="cardFilter" placeholder="输入卡号筛选" />
        <button class="btn" @click="exportCSV">导出CSV</button>
      </div>
    </div>
    <div class="report-section">
      <h3>交易明细</h3>
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>时间</th>
              <th>卡号</th>
              <th>类型</th>
              <th>金额</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tx in filteredTransactions" :key="tx.id">
              <td>{{ tx.time }}</td>
              <td>{{ tx.cardNumber }}</td>
              <td>{{ tx.type }}</td>
              <td :class="tx.amount > 0 ? 'plus' : 'minus'">{{ tx.amount > 0 ? '+' : '' }}{{ tx.amount }}</td>
              <td>{{ tx.remark }}</td>
            </tr>
            <tr v-if="filteredTransactions.length === 0">
              <td colspan="5" style="text-align:center;">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="report-section">
      <h3>月末汇总</h3>
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>卡号</th>
              <th>本月交易总额</th>
              <th>月末余额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="sum in summary" :key="sum.cardNumber">
              <td>{{ sum.cardNumber }}</td>
              <td>{{ sum.totalAmount }}</td>
              <td>{{ sum.endBalance }}</td>
            </tr>
            <tr v-if="summary.length === 0">
              <td colspan="3" style="text-align:center;">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportCenter',
  data() {
    return {
      month: new Date().toISOString().slice(0, 7),
      cardFilter: '',
      // 模拟交易数据
      transactions: [],
      // 模拟月末余额
      endBalances: {
        '6222001000000001': 12000,
        '6222001000000002': 8000
      }
    }
  },
  computed: {
    filteredTransactions() {
      return this.transactions.filter(tx => {
        const txMonth = tx.time.slice(0, 7)
        return txMonth === this.month && (!this.cardFilter || tx.cardNumber.includes(this.cardFilter))
      })
    },
    summary() {
      // 汇总本月每张卡的交易总额和月末余额
      const map = {}
      this.filteredTransactions.forEach(tx => {
        if (!map[tx.cardNumber]) {
          map[tx.cardNumber] = { cardNumber: tx.cardNumber, totalAmount: 0, endBalance: this.endBalances[tx.cardNumber] || 0 }
        }
        map[tx.cardNumber].totalAmount += tx.amount
      })
      return Object.values(map)
    }
  },
  methods: {
    exportCSV() {
      const headers = ['时间','卡号','类型','金额','备注']
      const rows = this.filteredTransactions.map(tx => [tx.time, tx.cardNumber, tx.type, tx.amount, tx.remark])
      const summaryHeaders = ['卡号','本月交易总额','月末余额']
      const summaryRows = this.summary.map(s => [s.cardNumber, s.totalAmount, s.endBalance])
      let csv = headers.join(',') + '\n' + rows.map(r => r.join(',')).join('\n')
      csv += '\n\n' + summaryHeaders.join(',') + '\n' + summaryRows.map(r => r.join(',')).join('\n')
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = `银行卡报表_${this.month}.csv`
      link.click()
    }
  }
}
</script>

<style scoped>
.report-center {
  padding: 24px;
}
.report-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.report-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 16px 0 0;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover {
  background: #1d4ed8;
}
.report-section {
  margin-bottom: 32px;
}
.table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow-x: auto;
  margin-top: 12px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.data-table th {
  background: #f9fafb;
  font-weight: 600;
}
.plus { color: #16a34a; }
.minus { color: #dc2626; }
@media (max-width: 768px) {
  .report-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .data-table th, .data-table td { font-size: 13px; padding: 8px 8px; }
}
</style> 